<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta content="yes" name="apple-mobile-web-app-capable">
          <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, target-densityDpi=device-dpi" />
          <!-- 微软的老式浏览器 -->
          <meta name="MobileOptimized" content="320">
          <!-- 启用360浏览器的极速模式(webkit) – -->
          <meta name="renderer" content="webkit">
          <!-- 避免IE使用兼容模式 -->
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
          <meta name="HandheldFriendly" content="true">
          <!-- uc强制竖屏 -->
          <meta name="screen-orientation" content="portrait">
          <!-- QQ强制竖屏 -->
          <meta name="x5-orientation" content="portrait">
          <!-- UC强制全屏 -->
          <meta name="full-screen" content="yes">
          <!-- QQ强制全屏 -->
          <meta name="x5-fullscreen" content="true">
          <!-- UC应用模式 若开启长按无法复制链接-->
          <!--meta name="browsermode" content="application"-->
          <!-- QQ应用模式 -->
          <meta name="x5-page-mode" content="app">
          <!--网站开启对web app程序的支持-->
          <meta name="apple-touch-fullscreen" content="yes">
          <!--在web app应用下状态条（屏幕顶部条）的颜色-->
          <meta name="apple-mobile-web-app-status-bar-style" content="black">
          <!-- windows phone 点击无高光 -->
          <meta name="msapplication-tap-highlight" content="no">
          <!--移动web页面是否自动探测电话号码-->
          <!--<meta http-equiv="x-rim-auto-match" content="none">-->
          <!--手机号码显示为拨号链接-->
          <meta name="format-detection" content="telephone=no">
          <meta http-equiv="Cache-Control" content="max-age=300" />
          <meta http-equiv="Expires" content="300" />
          <title>投哪网-圈子详情</title>
          <link rel="stylesheet" href="../assets/layer_mobile/need/layer.css">
          <link rel="stylesheet" href="../assets/swiper/css/swiper.min.css">
          <link rel="stylesheet" href="../css/message-index.css">
          <script src="../assets/layer_mobile/layer.js"></script>
          <link rel="stylesheet" href="../css/reset.css">
          <!-- <script src="../js/jquery.min.js"></script> -->
          <script src="http://www.jq22.com/jquery/1.9.1/jquery.min.js"></script>
          <script src="../js/common.js"></script>
          <script src="../assets/swiper/js/swiper.jquery.min.js"></script>
           <script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
    </head>
    <body>
        <div class="nav_top">
            <ul>
                <li>
                  <a href="#">
                    <div class="nav_img"> <img src="../images/icon_xx_hud_nor.png" width="100%" height="100%"> </div>
                    <div class="is_read"></div>
                    <span>互动通知</span>
                  <a>
                </li>

                <li>
                  <a href="#">
                    <div class="nav_img"> <img src="../images/icon_xx_mes_nor.png"  width="100%" height="100%"> </div>
                    <div class="is_read"></div>
                    <span>站内信</span>
                  </a>
                </li>

                <li>
                  <a href="#">
                    <div class="nav_img"> <img src="../images/icon_xx_gg_nor.png"  width="100%" height="100%"> </div>
                    <div class="is_read"></div>
                    <span>平台公告</span>
                  </a>
                </li>
            </ul>

        </div>

        <div class="im_chat">
          <div class="chat_title">
          <span class="caht_title">聊天列表</span>
          <input type="text" class="search-inp" name="" placeholder="搜索">
          <a href="javascript:" class="a_seach" onclick="to_seach(this)"><img src="http://wei.8hjie.com/App/Home/Public/images/search-person.png" width="100%" height="100%"></a>
          <div class="close_seach" onclick="to_seach(this)">取消</div>
          </div>
          <div class="chat-con">
            <div class="chat-list" id="list">
              <ul>
                <li>
                  <div class="chat-item clearfix ">
                    <div class="chat-left">
                      <div class="chat-icon">
                        <img src="../images/chat-icon.png">
                      </div>
                      
                    </div>
                    <div class="chat-right">
                      <h4>8号客服-小8</h4>
                      <p>您好！客服在线时间为工作日08:00点至19:00....</p>
                    </div>
                  </div>
                  <a class="delete">删除</a>
                  <a class="delete-sure">确认删除</a>
                </li>
                <li>
                  <div class="chat-item clearfix ">
                    <div class="chat-left">
                      <div class="chat-icon">
                        <img src="../images/chat-icon.png">
                      </div>
                      
                    </div>
                    <div class="chat-right">
                      <h4>8号客服-小4</h4>
                      <p>您好！客服在线时间为工作日10:00点至19:00....</p>
                    </div>
                  </div>
                  <a class="delete">删除</a>
                  <a class="delete-sure">确认删除</a>
                </li>
                <li>
                  <div class="chat-item clearfix ">
                    <div class="chat-left">
                      <div class="chat-icon">
                        <img src="../images/chat-icon.png">
                      </div>
                      
                    </div>
                    <div class="chat-right">
                      <h4>8号客服-小6</h4>
                      <p>您好！客服在线时间为工作日07:00点至19:00....</p>
                    </div>
                  </div>
                  <a class="delete">删除</a>
                  <a class="delete-sure">确认删除</a>
                </li>
                <li>
                  <div class="chat-item clearfix ">
                    <div class="chat-left">
                      <div class="chat-icon">
                        <img src="../images/chat-icon.png">
                      </div>
                      
                    </div>
                    <div class="chat-right">
                      <h4>8号客服-小8</h4>
                      <p>您好！客服在线时间为工作日06:00点至19:00....</p>
                    </div>
                  </div>
                  <a class="delete">删除</a>
                  <a class="delete-sure">确认删除</a>
                </li>
                <li>
                  <div class="chat-item clearfix ">
                    <div class="chat-left">
                      <div class="chat-icon">
                        <img src="../images/chat-icon.png">
                      </div>
                      <span class="chat-tip">8</span>
                    </div>
                    <div class="chat-right">
                      <h4>8号客服-小7</h4>
                      <p>您好！客服在线时间为工作日08:00点至19:00....</p>
                    </div>
                  </div>
                  <a class="delete">删除</a>
                  <a class="delete-sure">确认删除</a>
                </li>
              </ul>
            </div>
          
          </div> 
        </div>
           

       
    </body>
    <script type="text/javascript">
        function to_seach(obj){
          var is_show=$(obj).prev().prev('span').css('display');
          if(is_show=="block"){
            $('.caht_title').hide();
            $('.search-inp').show();
            $(obj).hide();
           $('.close_seach').show();
          }else{
           $('.caht_title').show();
           $(obj).hide();
           $('.a_seach').show();
           $('.search-inp').hide();
           $('.search-inp').val('');
           $('.search-inp').change();
          }
          

        }


            // 侧滑删除
      $(document).on("pagecreate",function(){ 
        $(".chat-list ul li").on("swipeleft",function(){
          $(".chat-list ul li").each(function(i,e){
            $(e).animate({marginLeft:'0rem'},500);
          })
          $(this).animate({marginLeft:'-2rem'},500);
           $('.delete').click(function(){
            $(this).parent('li').animate({marginLeft:'-4rem'},500);
          });
           $('.delete-sure').click(function(){
            $(this).parent('li').remove();
           })

        });
        $(".chat-list ul li").on("swiperight",function(){
          $(this).animate({marginLeft:'0rem'},500);
        });
      });
      // 
      </script>
      <script> 
(function ($) {
  jQuery.expr[':'].Contains = function(a,i,m){
      return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0;
  };
  function filterList(header, list) { 

  $('.search-inp')
      .change( function () {
        var filter = $(this).val();
        if(filter) {
          $matches = $(list).find('h4:Contains(' + filter + ')').parent().parent().parent();
          $('li', list).not($matches).slideUp();
          $matches.slideDown();
        } else {
          $(list).find("li").slideDown();
        }
        return false;
      })
    .keyup( function () {
        $(this).change();
    });
  }
  $(function () {
    filterList($("#form"), $("#list"));
  });
}(jQuery));

    </script>
</html>
